<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../assets/css/layui.css">
    <link rel="stylesheet" href="../assets/css/view.css"/>
    <link rel="icon" href="/favicon.ico">
    <title>管理后台</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body class="layui-view-body">
<div class="layui-content" id="content">
    <div class="layui-page-header">
        <div class="pagewrap">
                <span class="layui-breadcrumb">
                  <a href="">首页</a>
                  <a href="">用户</a>
                  <a><cite>商品管理</cite></a>
                </span>
            <h2 class="title">商品管理</h2>
        </div>
    </div>
    <div class="layui-row">
        <div>
            <div class="layui-form  toolbar">
                <div class="layui-inline">

                    <select id="searchKey">
                        <option value="">-请选择-</option>
                        <option value="user_id">ID</option>
                        <option value="user_account">账号</option>
                        <option value="user_nickname">用户名</option>
                        <option value="mobile_phone">手机号</option>
                    </select>&emsp;
                </div>
                <div class="layui-inline">
                    <input id="searchValue" class="layui-input search-input" type="text" placeholder="输入搜索内容"/>&emsp;
                </div>

                <div class="layui-inline">
                    <button id="searchBtn" class="layui-btn search-btn"><i class="layui-icon">&#xe615;</i>搜索</button>&emsp;
                </div>


            </div>

            <table class="layui-table" id="table" lay-filter="table"></table>
        </div>



    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>

</script>

<script src="../assets/layui.all.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>

<script>

    $(function () {
        //渲染表格
        layui.table.render({
            elem: '#table',
            // url : '/merchant/find/m/goods',
            url: '/order/find/item',
            page: false,
            response: {
                statusName: 'code' //数据状态的字段名称，默认：code
                , statusCode: 1001 //成功的状态码，默认：0
                , msgName: 'msg' //状态信息的字段名称，默认：msg
                , countName: 'total' //数据总数的字段名称，默认：count
                , dataName: 'obj' //数据列表的字段名称，默认：data
            },
            cols: [[
                {type: 'numbers'},
                {field: 'id', sort: true, title: 'ID'},
                {
                    field: 'goods', sort: true, templet: function (d) {
                        console.log(d)
                        return d.goods.category.name;
                    }, title: '商品'
                },
                {field: 'num', sort: true, title: '数量'},
                {field: 'price', sort: true, title: '商品价格'},
                {field: 'totalPrice', sort: true, title: '商品总价'},
                {field: 'comments', sort: true, templet: function (d) {
                        console.log(d)
                    if(d.comments.length==0){
                        return "没有评论";
                    }else{
                        return "最新评论:"+ d.comments[0].context;
                    }
                    },width:150, title: '评论'},
                {templet: function (d) {
                        console.log(d)
                        if(d.refund==1){
                            return "用户申请退款";
                        }else{
                            return "";
                        }
                    },width:150, title: '订单状态'},
                {align: 'center',templet: function (d) {
                        console.log(d)
                        if(d.refund==1){
                            return " <a class=\"layui-btn layui-btn-primary layui-btn-xs\" lay-event=\"del\">同意退款</a> <a class=\"layui-btn layui-btn-primary layui-btn-xs\" lay-event=\"jujue\">拒绝</a>";
                        }else{
                            return "";
                        }
                    },width:150,title: '退款操作'},
                {align: 'center',templet: function (d) {
                        console.log(d)
                        if(d.comments.length==0){
                            return " ";
                        }else{
                            return "<a class=\"layui-btn layui-btn-primary layui-btn-xs\" lay-event=\"hui\">回复</a>";
                        }
                    },title: '回复操作'}
            ]]
        });

        //添加按钮点击事件
        $("#addBtn").click(function () {
            showEditModel(null);
        });


        //工具条点击事件
        layui.table.on('tool(table)', function (obj) {

            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'hui') { //修改
                showEditModel(data);
            } else if (layEvent === 'del') { //删除
                doDelete(obj);
            }
            else if (layEvent === 'jujue') { //删除
                jujue(obj);
            }

        });

        //监听状态开关操作
        layui.form.on('switch(statusCB)', function (obj) {
            updateStatus(obj);
        });

        $("#btnCancel").click(function(){
            layer.closeAll('page');
        });

        //搜索按钮点击事件
        $("#searchBtn").click(function () {
            doSearch(table);
        });
    });

    //显示表单弹窗
    function showEditModel(data) {
        console.log("shuju")
        console.log(data)
        layer.prompt(function(val, index){
            layer.close(index);
            $.ajax({
                url: "/comment/reply",
                type: "post",
                data: {
                    id: data.id,
                    reply:val
                },
                dataType: "JSON",
                success: function (data) {
                    layer.closeAll('loading');
                    if (data.code == 1001) {
                        layer.msg("回复成功", {icon: 1});
                        // layui.table.reload('table', {});
                    } else {
                        layer.msg(data.msg, {icon: 2});
                    }
                }
            });

        });

    }



    function jujue(obj) {
        layer.confirm('确定决绝退款吗？', function (index) {
            layer.close(index);
            layer.load(1);
            console.log(obj);
            $.ajax({
                url: "/order/refund/op",
                type: "post",
                data: {
                    id: obj.data.id,
                    op:2
                },
                dataType: "JSON",
                success: function (data) {
                    layer.closeAll('loading');
                    if (data.code == 1001) {
                        layer.msg(data.msg, {icon: 1});
                        layui.table.reload('table', {});
                    } else {
                        layer.msg(data.msg, {icon: 2});
                    }
                }
            });
        });
    }



    //tui
    function doDelete(obj) {
        layer.confirm('确定同意退款吗？', function (index) {
            layer.close(index);
            layer.load(1);
            console.log(obj);
            $.ajax({
                url: "/order/refund/op",
                type: "post",
                data: {
                    id: obj.data.id,
                    op:3
                },
                dataType: "JSON",
                success: function (data) {
                    layer.closeAll('loading');
                    if (data.code == 1001) {
                        layer.msg(data.msg, {icon: 1});
                        layui.table.reload('table', {});
                    } else {
                        layer.msg(data.msg, {icon: 2});
                    }
                }
            });
        });
    }


    //搜索
    function doSearch(table) {
        var key = $("#searchKey").val();
        var value = $("#searchValue").val();
        if (value == '') {
            key = '';
        }
        layui.table.reload('table', {where: {searchKey: key, searchValue: value}});
    }


</script>
</body>
</html>